<template>
  <Top></Top>
  <router-view></router-view>
</template>

<script>
import Top from "../components/sidemenu/Top.vue";
export default {
  data() {
    return {};
  },
  components: {
    Top,
  },
};
</script>

<style>
a {
  color: #000000;
  text-decoration: none;
}

* {
  margin: 0;
  padding: 0;
}

.container {
  position: absolute;
  height: auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-card-container {
  /* display: flex;
		background-color: #FFFFFF;*/
  height: 70%;
  width: 80%;
  margin-top: 4rem;
  /* border: 1px solid #d9d9d9; */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.04); */
}

.optino-card-content {
  display: flex;
}

.optino-card-detail {
  text-align: left;
  margin: 3rem 2rem 0 2rem;
  color: #767676;
}

.optino-card-image {
  margin-top: 1rem;
}

.optino-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1rem;
  transition: 0.2s;
}

.optino-card-title-no {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1rem;
  color: #838383;
  cursor: default;
  transition: 0.2s;
}

.optino-card {
  width: 350px;
  margin: 0 1.5625rem 1.25rem 1.25rem;
  background-color: #f7f7f7;
  height: 25rem;
  transition: background-color 0.5s;
}

.optino-card:hover {
  background-color: #dedede;
  transition: background-color 0.5s;
}

.optino-card:hover .optino-card-title {
  font-size: 1.375rem;
  transition: 0.2s;
}

.optino-card:hover .optino-card-title-no {
  font-size: 1.375rem;
  transition: 0.2s;
}
</style>
